<template>
    <div class='container'>
        <!-- 页面头部 -->
        <page-header title="编辑活动" @heightChange="handleHeaderHeightChange" />

        <!-- 表单区域 -->
        <view class="form-section">
            <!-- 基础信息编辑 -->
            <view class="form-group">
                <view class="group-header" @click="handleGroupToggle('basic')">
                    <view class="group-title">
                        <uni-icons type="info" size="20" color="#007AFF"></uni-icons>
                        <view class="title-text">基础信息</view>
                        <view class="required-tag">必填</view>
                    </view>
                    <uni-icons :type="expandedGroups.basic ? 'up' : 'down'" size="16" color="#666"></uni-icons>
                </view>
                <view class="group-content" v-if="expandedGroups.basic">
                    <view class="form-item">
                        <view class="form-label">活动标题</view>
                        <input class="form-input" placeholder="请输入活动标题" v-model="formData.title" maxlength="50" />
                        <view class="form-tip">{{ formData.title.length }}/50</view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">活动描述</view>
                        <textarea class="form-textarea" placeholder="请详细描述活动内容..." v-model="formData.description"
                            maxlength="500" />
                        <view class="form-tip">{{ formData.description.length }}/500</view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">活动分类</view>
                        <view class="category-selector" @click="handleCategorySelectClick">
                            <view class="selected-category">{{ formData.category || '请选择分类' }}</view>
                            <uni-icons type="right" size="16" color="#666"></uni-icons>
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">活动封面</view>
                        <view class="upload-area" @click="handleImageUploadClick">
                            <image v-if="formData.coverImage" class="uploaded-image" :src="formData.coverImage"
                                mode="aspectFill" />
                            <view v-else class="upload-placeholder">
                                <uni-icons type="camera" size="40" color="#ccc"></uni-icons>
                                <view class="upload-text">点击上传封面</view>
                            </view>
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">活动时间</view>
                        <view class="time-range">
                            <view class="time-item">
                                <view class="time-label">开始时间</view>
                                <view class="time-picker" @click="handleStartTimeClick">
                                    <view class="time-text">{{ formData.startTime || '请选择开始时间' }}</view>
                                    <uni-icons type="calendar" size="16" color="#666"></uni-icons>
                                </view>
                            </view>
                            <view class="time-item">
                                <view class="time-label">结束时间</view>
                                <view class="time-picker" @click="handleEndTimeClick">
                                    <view class="time-text">{{ formData.endTime || '请选择结束时间' }}</view>
                                    <uni-icons type="calendar" size="16" color="#666"></uni-icons>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 投票设置 -->
            <view class="form-group">
                <view class="group-header" @click="handleGroupToggle('vote')">
                    <view class="group-title">
                        <uni-icons type="checkbox" size="20" color="#4cd964"></uni-icons>
                        <view class="title-text">投票设置</view>
                    </view>
                    <uni-icons :type="expandedGroups.vote ? 'up' : 'down'" size="16" color="#666"></uni-icons>
                </view>
                <view class="group-content" v-if="expandedGroups.vote">
                    <view class="form-item">
                        <view class="form-label">投票方式</view>
                        <view class="radio-group">
                            <view class="radio-item" @click="handleVoteTypeChange('single')">
                                <view class="radio-button" :class="{ active: formData.voteType === 'single' }"></view>
                                <view class="radio-text">单选投票</view>
                            </view>
                            <view class="radio-item" @click="handleVoteTypeChange('multiple')">
                                <view class="radio-button" :class="{ active: formData.voteType === 'multiple' }"></view>
                                <view class="radio-text">多选投票</view>
                            </view>
                        </view>
                    </view>

                    <view class="form-item" v-if="formData.voteType === 'multiple'">
                        <view class="form-label">最大选择数量</view>
                        <input class="form-input" type="number" placeholder="请输入最大选择数量"
                            v-model="formData.maxSelections" />
                    </view>

                    <view class="form-item">
                        <view class="form-label">每人投票次数</view>
                        <input class="form-input" type="number" placeholder="请输入每人投票次数"
                            v-model="formData.votesPerPerson" />
                    </view>

                    <view class="form-item">
                        <view class="form-label">是否允许重复投票</view>
                        <view class="switch-item">
                            <view class="switch-text">允许重复投票</view>
                            <switch :checked="formData.allowRepeatVote" @change="handleRepeatVoteChange" />
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">投票结果可见性</view>
                        <view class="radio-group">
                            <view class="radio-item" @click="handleResultVisibilityChange('public')">
                                <view class="radio-button" :class="{ active: formData.resultVisibility === 'public' }">
                                </view>
                                <view class="radio-text">公开结果</view>
                            </view>
                            <view class="radio-item" @click="handleResultVisibilityChange('private')">
                                <view class="radio-button" :class="{ active: formData.resultVisibility === 'private' }">
                                </view>
                                <view class="radio-text">仅管理员可见</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 防刷设置 -->
            <view class="form-group">
                <view class="group-header" @click="handleGroupToggle('antiSpam')">
                    <view class="group-title">
                        <uni-icons type="shield" size="20" color="#ff9500"></uni-icons>
                        <view class="title-text">防刷设置</view>
                    </view>
                    <uni-icons :type="expandedGroups.antiSpam ? 'up' : 'down'" size="16" color="#666"></uni-icons>
                </view>
                <view class="group-content" v-if="expandedGroups.antiSpam">
                    <view class="form-item">
                        <view class="form-label">IP限制</view>
                        <view class="switch-item">
                            <view class="switch-text">启用IP限制</view>
                            <switch :checked="formData.ipLimit" @change="handleIpLimitChange" />
                        </view>
                    </view>

                    <view class="form-item" v-if="formData.ipLimit">
                        <view class="form-label">同一IP投票间隔（分钟）</view>
                        <input class="form-input" type="number" placeholder="请输入时间间隔" v-model="formData.ipInterval" />
                    </view>

                    <view class="form-item">
                        <view class="form-label">设备限制</view>
                        <view class="switch-item">
                            <view class="switch-text">启用设备限制</view>
                            <switch :checked="formData.deviceLimit" @change="handleDeviceLimitChange" />
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">验证码</view>
                        <view class="switch-item">
                            <view class="switch-text">启用验证码</view>
                            <switch :checked="formData.captcha" @change="handleCaptchaChange" />
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">投票频率限制</view>
                        <input class="form-input" type="number" placeholder="请输入投票间隔（秒）"
                            v-model="formData.voteInterval" />
                    </view>
                </view>
            </view>

            <!-- 高级设置 -->
            <view class="form-group">
                <view class="group-header" @click="handleGroupToggle('advanced')">
                    <view class="group-title">
                        <uni-icons type="gear" size="20" color="#666"></uni-icons>
                        <view class="title-text">高级设置</view>
                    </view>
                    <uni-icons :type="expandedGroups.advanced ? 'up' : 'down'" size="16" color="#666"></uni-icons>
                </view>
                <view class="group-content" v-if="expandedGroups.advanced">
                    <view class="form-item">
                        <view class="form-label">活动状态</view>
                        <view class="radio-group">
                            <view class="radio-item" @click="handleStatusChange('draft')">
                                <view class="radio-button" :class="{ active: formData.status === 'draft' }"></view>
                                <view class="radio-text">草稿</view>
                            </view>
                            <view class="radio-item" @click="handleStatusChange('published')">
                                <view class="radio-button" :class="{ active: formData.status === 'published' }"></view>
                                <view class="radio-text">发布</view>
                            </view>
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">参与权限</view>
                        <view class="radio-group">
                            <view class="radio-item" @click="handlePermissionChange('public')">
                                <view class="radio-button" :class="{ active: formData.permission === 'public' }"></view>
                                <view class="radio-text">公开参与</view>
                            </view>
                            <view class="radio-item" @click="handlePermissionChange('invite')">
                                <view class="radio-button" :class="{ active: formData.permission === 'invite' }"></view>
                                <view class="radio-text">邀请参与</view>
                            </view>
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">活动标签</view>
                        <view class="tags-section">
                            <view class="tags-input">
                                <input class="tag-input" placeholder="输入标签后按回车" v-model="tagInput"
                                    @confirm="handleAddTag" />
                            </view>
                            <view class="tags-list">
                                <view class="tag-item" v-for="(tag, index) in formData.tags" :key="index">
                                    <view class="tag-text">{{ tag }}</view>
                                    <view class="tag-delete" @click="handleDeleteTag(index)">
                                        <uni-icons type="close" size="12" color="#fff"></uni-icons>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="form-item">
                        <view class="form-label">备注信息</view>
                        <textarea class="form-textarea" placeholder="请输入备注信息..." v-model="formData.remarks"
                            maxlength="200" />
                        <view class="form-tip">{{ formData.remarks.length }}/200</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-section">
            <view class="action-buttons">
                <button class="preview-btn" @click="handlePreviewButtonClick">
                    <view>预览活动</view>
                </button>
                <button class="save-btn" @click="handleSaveButtonClick">
                    <view>{{ isSubmitting ? '保存中...' : '保存活动' }}</view>
                </button>
            </view>
        </view>

        <!-- 底部导航栏 -->
        <page-bottom pageUrl="/pages-vote/Index" @navClick="handleTabClick" @heightChange="handleBottomHeightChange" />
    </div>
</template>

<script>
// 结构
import {
    defineComponent,
    onMounted,
    ref,
    reactive,
    computed
} from 'vue';
// 模块化
import PageHeader from '@/components/PageHeader.vue';
import PageBottom from '@/components/PageBottom.vue';

export default defineComponent({
    name: 'VoteEdit', // 组件名称
    props: {
        // 接收父组件数据

    },
    components: {
        PageHeader,
        PageBottom
    },
    // 主要是组件内交互事件
    setup(props, ctx) {
        // 这里没有this,直接使用props里数据
        // 进行数据的定义和初始化。object style interactive
        onMounted(() => { });

        // ===== 响应式对象 =====
        // 头部高度相关数据
        const headerHeight = ref(0);
        const bottomHeight = ref(0);

        // 表单数据
        const formData = ref({
            // 基础信息
            title: '',
            description: '',
            category: '',
            coverImage: '',
            startTime: '',
            endTime: '',

            // 投票设置
            voteType: 'single',
            maxSelections: 1,
            votesPerPerson: 1,
            allowRepeatVote: false,
            resultVisibility: 'public',

            // 防刷设置
            ipLimit: true,
            ipInterval: 5,
            deviceLimit: true,
            captcha: false,
            voteInterval: 30,

            // 高级设置
            status: 'draft',
            permission: 'public',
            tags: [],
            remarks: ''
        });

        // 标签输入
        const tagInput = ref('');

        // 展开状态管理
        const expandedGroups = ref({
            basic: true, // 基础信息默认展开
            vote: false,
            antiSpam: false,
            advanced: false
        });

        // 提交状态
        const isSubmitting = ref(false);

        // 分类选项
        const categoryOptions = ref([
            '员工评选',
            '产品投票',
            '活动方案',
            '意见征集',
            '其他'
        ]);

        // ===== 方法函数 =====
        // 处理头部高度变化
        const handleHeaderHeightChange = (heightInfo) => {
            headerHeight.value = heightInfo.totalHeaderHeight;
        };

        // 处理底部高度变化
        const handleBottomHeightChange = (heightInfo) => {
            bottomHeight.value = heightInfo.totalBottomHeight;
        };

        // 处理分组切换
        const handleGroupToggle = (groupName) => {
            expandedGroups.value[groupName] = !expandedGroups.value[groupName];
        };

        // 处理图片上传点击
        const handleImageUploadClick = () => {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    formData.value.coverImage = res.tempFilePaths[0];
                },
                fail: (err) => {
                    uni.showToast({
                        title: '选择图片失败',
                        icon: 'none'
                    });
                }
            });
        };

        // 处理分类选择点击
        const handleCategorySelectClick = () => {
            uni.showActionSheet({
                itemList: categoryOptions.value,
                success: (res) => {
                    formData.value.category = categoryOptions.value[res.tapIndex];
                }
            });
        };

        // 处理开始时间选择
        const handleStartTimeClick = () => {
            uni.showDatePicker({
                mode: 'datetime',
                success: (res) => {
                    formData.value.startTime = res.value;
                }
            });
        };

        // 处理结束时间选择
        const handleEndTimeClick = () => {
            uni.showDatePicker({
                mode: 'datetime',
                success: (res) => {
                    formData.value.endTime = res.value;
                }
            });
        };

        // 处理投票方式变更
        const handleVoteTypeChange = (type) => {
            formData.value.voteType = type;
            if (type === 'single') {
                formData.value.maxSelections = 1;
            }
        };

        // 处理重复投票变更
        const handleRepeatVoteChange = (e) => {
            formData.value.allowRepeatVote = e.detail.value;
        };

        // 处理结果可见性变更
        const handleResultVisibilityChange = (visibility) => {
            formData.value.resultVisibility = visibility;
        };

        // 处理IP限制变更
        const handleIpLimitChange = (e) => {
            formData.value.ipLimit = e.detail.value;
        };

        // 处理设备限制变更
        const handleDeviceLimitChange = (e) => {
            formData.value.deviceLimit = e.detail.value;
        };

        // 处理验证码变更
        const handleCaptchaChange = (e) => {
            formData.value.captcha = e.detail.value;
        };

        // 处理状态变更
        const handleStatusChange = (status) => {
            formData.value.status = status;
        };

        // 处理权限变更
        const handlePermissionChange = (permission) => {
            formData.value.permission = permission;
        };

        // 处理添加标签
        const handleAddTag = () => {
            if (tagInput.value.trim() && formData.value.tags.length < 5) {
                formData.value.tags.push(tagInput.value.trim());
                tagInput.value = '';
            } else if (formData.value.tags.length >= 5) {
                uni.showToast({
                    title: '最多添加5个标签',
                    icon: 'none'
                });
            }
        };

        // 处理删除标签
        const handleDeleteTag = (index) => {
            formData.value.tags.splice(index, 1);
        };

        // 处理预览按钮点击
        const handlePreviewButtonClick = () => {
            if (!validateBasicForm()) {
                return;
            }
            uni.navigateTo({
                url: `/pages-vote/VoteDetail?id=preview&data=${encodeURIComponent(JSON.stringify(formData.value))}`
            });
        };

        // 处理保存按钮点击
        const handleSaveButtonClick = () => {
            if (!validateForm()) {
                return;
            }

            isSubmitting.value = true;

            // 模拟保存过程
            setTimeout(() => {
                isSubmitting.value = false;
                uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                });

                // 返回上一页
                setTimeout(() => {
                    uni.navigateBack();
                }, 1500);
            }, 2000);
        };

        // 处理底部导航点击
        const handleTabClick = (item) => {
            console.log('切换到:', item.path);
        };

        // ===== 生命周期钩子 =====
        onMounted(() => {
            // 可以在这里加载编辑数据
            loadEditData();
        });

        // 加载编辑数据
        const loadEditData = async () => {
            try {
                // TODO: 调用实际接口获取编辑数据
                // const res = await getVoteEditData(this.$route.query.id);
                // formData.value = res.data;
            } catch (error) {
                console.error('加载编辑数据失败:', error);
                uni.showToast({
                    title: '加载数据失败',
                    icon: 'none'
                });
            }
        };

        // 基础表单验证
        const validateBasicForm = () => {
            if (!formData.value.title.trim()) {
                uni.showToast({
                    title: '请输入活动标题',
                    icon: 'none'
                });
                return false;
            }

            if (!formData.value.description.trim()) {
                uni.showToast({
                    title: '请输入活动描述',
                    icon: 'none'
                });
                return false;
            }

            if (!formData.value.category) {
                uni.showToast({
                    title: '请选择活动分类',
                    icon: 'none'
                });
                return false;
            }

            if (!formData.value.startTime) {
                uni.showToast({
                    title: '请选择开始时间',
                    icon: 'none'
                });
                return false;
            }

            if (!formData.value.endTime) {
                uni.showToast({
                    title: '请选择结束时间',
                    icon: 'none'
                });
                return false;
            }

            return true;
        };

        // 完整表单验证
        const validateForm = () => {
            if (!validateBasicForm()) {
                return false;
            }

            // 其他验证逻辑
            if (formData.value.voteType === 'multiple' && (!formData.value.maxSelections || formData.value.maxSelections < 1)) {
                uni.showToast({
                    title: '请输入有效的最大选择数量',
                    icon: 'none'
                });
                return false;
            }

            return true;
        };

        // ===== 返回数据和方法 =====
        return {
            // 响应式对象
            headerHeight,
            bottomHeight,
            formData,
            tagInput,
            expandedGroups,
            isSubmitting,
            categoryOptions,

            // 方法函数
            handleHeaderHeightChange,
            handleBottomHeightChange,
            handleGroupToggle,
            handleImageUploadClick,
            handleCategorySelectClick,
            handleStartTimeClick,
            handleEndTimeClick,
            handleVoteTypeChange,
            handleRepeatVoteChange,
            handleResultVisibilityChange,
            handleIpLimitChange,
            handleDeviceLimitChange,
            handleCaptchaChange,
            handleStatusChange,
            handlePermissionChange,
            handleAddTag,
            handleDeleteTag,
            handlePreviewButtonClick,
            handleSaveButtonClick,
            handleTabClick,
            loadEditData,
            validateBasicForm,
            validateForm
        };
    },
    // 组件之间交互事件
    methods: {

    },
    // 生命周期 - 创建完成（访问DOM元素）
    beforeCreate() {

    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问当前this实例）
    mounted() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    beforeUpdate() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    updated() {

    },
    // 生命周期 - 销毁之前（访问当前this实例）
    unmounted() {

    },
    // 生命周期 - 组件激活（访问当前this实例）
    activated() {

    },
    // 生命周期 - 组件停用（访问当前this实例）
    deactivated() {

    },
    // 生命周期 - 子孙组件错误时
    errorCaptured() {

    }
});
</script>
<style lang='less' scoped>
/* scoped 使用得定义的样式只在本页面内生效  */
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-top: v-bind('headerHeight + "px"');
    padding-bottom: v-bind('bottomHeight + "px"');

    // 表单区域
    .form-section {
        margin: 20rpx;

        .form-group {
            margin-bottom: 20rpx;
            background-color: #ffffff;
            border-radius: 16rpx;
            box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
            overflow: hidden;

            .group-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 30rpx;
                background-color: #f8f8f8;
                border-bottom: 1rpx solid #f2f2f2;

                .group-title {
                    display: flex;
                    align-items: center;

                    .title-text {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                        margin-left: 12rpx;
                    }

                    .required-tag {
                        margin-left: 15rpx;
                        padding: 4rpx 12rpx;
                        background-color: #ff4757;
                        color: #ffffff;
                        border-radius: 12rpx;
                        font-size: 20rpx;
                    }
                }
            }

            .group-content {
                padding: 30rpx;

                .form-item {
                    margin-bottom: 30rpx;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .form-label {
                        font-size: 30rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 15rpx;
                    }

                    .form-input {
                        width: 100%;
                        height: 80rpx;
                        padding: 0 20rpx;
                        border: 1rpx solid #ddd;
                        border-radius: 8rpx;
                        font-size: 28rpx;
                        color: #333;
                        background-color: #fff;
                    }

                    .form-textarea {
                        width: 100%;
                        min-height: 200rpx;
                        padding: 20rpx;
                        border: 1rpx solid #ddd;
                        border-radius: 8rpx;
                        font-size: 28rpx;
                        color: #333;
                        background-color: #fff;
                        line-height: 1.5;
                    }

                    .form-tip {
                        font-size: 24rpx;
                        color: #999;
                        text-align: right;
                        margin-top: 10rpx;
                    }

                    .category-selector {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 80rpx;
                        padding: 0 20rpx;
                        border: 1rpx solid #ddd;
                        border-radius: 8rpx;
                        background-color: #fff;

                        .selected-category {
                            font-size: 28rpx;
                            color: #333;
                        }
                    }

                    .upload-area {
                        width: 100%;
                        height: 300rpx;
                        border: 2rpx dashed #ddd;
                        border-radius: 12rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #f8f8f8;

                        .uploaded-image {
                            width: 100%;
                            height: 100%;
                            border-radius: 12rpx;
                        }

                        .upload-placeholder {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            color: #ccc;

                            .upload-text {
                                font-size: 26rpx;
                                margin-top: 10rpx;
                            }
                        }
                    }

                    .time-range {
                        .time-item {
                            margin-bottom: 20rpx;

                            &:last-child {
                                margin-bottom: 0;
                            }

                            .time-label {
                                font-size: 26rpx;
                                color: #666;
                                margin-bottom: 10rpx;
                            }

                            .time-picker {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                height: 80rpx;
                                padding: 0 20rpx;
                                border: 1rpx solid #ddd;
                                border-radius: 8rpx;
                                background-color: #fff;

                                .time-text {
                                    font-size: 28rpx;
                                    color: #333;
                                }
                            }
                        }
                    }

                    .radio-group {
                        .radio-item {
                            display: flex;
                            align-items: center;
                            margin-bottom: 20rpx;

                            &:last-child {
                                margin-bottom: 0;
                            }

                            .radio-button {
                                width: 30rpx;
                                height: 30rpx;
                                border: 2rpx solid #ddd;
                                border-radius: 50%;
                                margin-right: 15rpx;
                                position: relative;

                                &.active {
                                    border-color: #007AFF;
                                    background-color: #007AFF;

                                    &::after {
                                        content: '';
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        width: 12rpx;
                                        height: 12rpx;
                                        background-color: #fff;
                                        border-radius: 50%;
                                    }
                                }
                            }

                            .radio-text {
                                font-size: 28rpx;
                                color: #333;
                            }
                        }
                    }

                    .switch-item {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .switch-text {
                            font-size: 28rpx;
                            color: #333;
                        }
                    }

                    .tags-section {
                        .tags-input {
                            margin-bottom: 15rpx;

                            .tag-input {
                                width: 100%;
                                height: 60rpx;
                                padding: 0 20rpx;
                                border: 1rpx solid #ddd;
                                border-radius: 8rpx;
                                font-size: 26rpx;
                                color: #333;
                                background-color: #fff;
                            }
                        }

                        .tags-list {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 15rpx;

                            .tag-item {
                                display: flex;
                                align-items: center;
                                padding: 8rpx 15rpx;
                                background-color: #007AFF;
                                border-radius: 20rpx;

                                .tag-text {
                                    font-size: 24rpx;
                                    color: #fff;
                                    margin-right: 8rpx;
                                }

                                .tag-delete {
                                    width: 24rpx;
                                    height: 24rpx;
                                    background-color: rgba(255, 255, 255, 0.3);
                                    border-radius: 50%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 操作按钮区域
    .action-section {
        margin: 20rpx;
        padding: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .action-buttons {
            display: flex;
            gap: 20rpx;

            .preview-btn {
                flex: 1;
                height: 80rpx;
                background-color: #f8f8f8;
                color: #666;
                border: none;
                border-radius: 40rpx;
                font-size: 28rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .save-btn {
                flex: 1;
                height: 80rpx;
                background-color: #007AFF;
                color: #ffffff;
                border: none;
                border-radius: 40rpx;
                font-size: 28rpx;
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>